<template>
    <div class="goodsinfo-container">

        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter ="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!--商品轮播图区-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :imageList="lunbo" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!---->
        <div class="mui-card">
            <div class="mui-card-header">Xiaomi/小米 小米9 全面屏SE骁龙855</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <p class="class">
                       市场价：<del>￥2999</del>&nbsp;&nbsp;销售价：<span class="now-price">￥2499</span>
                   </p>
                   <p>购买数量:<numbox @getcount="getSelectedCount" :max="60"></numbox></p>
                   <p>
                       <mt-button type="primary" size="small">立即购买</mt-button>
                       <mt-button type="danger" size="small" @click="addCar">加入购物车</mt-button>
                   </p>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：</p>
                    <p>库存情况</p>
                    <p>上架时间：</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain>图文介绍</mt-button>
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </div>
        </div>

    </div>
</template>
<script>
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
    data(){
        return {
            lunbo:[],
            app_key:'9701679D4CFB823670BA30DBEA0AE855',
            ballFlag:false,
            selectedCount:1
        }
    },
    created(){
        this.getLunBo();
    },
    methods:{
        getLunBo(){
            this.$jsonp('http://hd215.api.yesapi.cn/?&service=App.Table.FreeQuery&model_name=Drawing&logic=and&where=[["cat", "=", "0"]]&order=1&page=1&perpage=10&app_key='+this.app_key,{}
            ).then(res=>{
                res.data.list.forEach(item => {
                    item.images=item.img
                });
                this.lunbo=res.data.list
            })
        },
        addCar(){
            this.ballFlag=!this.ballFlag;
            var goodsinfo={
                id:1,
                count:this.selectedCount,
                price:2499,
                selected:true
            };
            this.$store.commit('addToCar',goodsinfo)
        },
        beforeEnter(el){
            el.style.transform="translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;

            const ballPosition= this.$refs.ball.getBoundingClientRect();
            const badegPosition= document.getElementById("badeg").getBoundingClientRect();

            const xDist = badegPosition.left - ballPosition.left;
            const yDist = badegPosition.top - ballPosition.top;
            el.style.transform=`translate(${xDist}px,${yDist}px)`;
            el.style.transition='all 0.7s ease';
            done()
        },
        afterEnter(el){
            this.ballFlag=!this.ballFlag
        },
        getSelectedCount(count){
            this.selectedCount=count;
            
        }
    },
    components:{
        swiper,numbox
    }
}
</script>
<style lang="scss" scoped>
.goodsinfo-container{
    background-color: #eee;
    overflow: hidden;

    .now-price{
        color: red;
        font-size: 16px;  
        font-weight: bold;  
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 15px 0;
        }
    }
    .ball{
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        z-index: 15;
        top:390px;
        left:138px;
    }
}

</style>
